<template>
  <NewCard :title="`${firstName}-${secondaryName}-${threeName}`">
    <div class="problem">
      <h3>
        <i>*</i> 请详细描述您的问题与需求 <span>(问题已加密,请放心提问)</span>
      </h3>
      <el-input
        type="textarea"
        :rows="10"
        resize="none"
        placeholder="请描述问题并提问…"
        v-model="textarea"
      >
      </el-input>
    </div>
    <div class="accessory">
      <h3>上传附件 (0/6)</h3>
      <el-upload
        class="upload-demo"
        action=""
        :auto-upload="false"
        :on-change="submitFile"
        :before-remove="handleRemove"
        :limit="limit"
        :on-exceed="handleExceed"
        :file-list="formdata.fileList"
      >
        <div class="uploadBtn">
          <el-button size="small" round>点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            支持PDF、DOC、DOCX、JPG、PNG格式，单个附件大小不超过2M,最多上传6个附件
          </div>
        </div>
      </el-upload>
    </div>
    <div class="submitBtn">
      <el-button round @click="submitbtn">提交订单</el-button>
    </div>
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
// 分享的组件
import ShareBox from "@/components/shareBox/index.vue"
export default {
  name: "Demand",
  components: { NewCard,ShareBox },
  props: ["firstName", "secondaryName", "threeName"],
  data() {
    return {
      textarea: "",
      limit: 6, //上传附件最多数量
      formdata: {
        textarea: "",
        fileList: [],
      },
    };
  },
  methods: {
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const filePost = file.name.substring(file.name.lastIndexOf(".") + 1);
        console.log(filePost, "filePost");

        if (filePost === "doc" || filePost === "docx") {
          if (file.size > 2 * 1024 * 1024) {
            // eslint-disable-next-line prefer-promise-reject-errors
            this.$message.warning("上传word大小不能超过2M!");
            this.fileList = [];
            return false;
          }
        } else {
          if (file.size > this.sizeLimit * 1024 * 1024) {
            // eslint-disable-next-line prefer-promise-reject-errors
            this.$message.warning(`上传附件大小不能超过${this.sizeLimit}M!`);
            this.fileList = [];
            return false;
          }
        }
        if (file.size > this.sizeLimit * 1024 * 1024) {
          // eslint-disable-next-line prefer-promise-reject-errors
          this.$message.warning(`上传图片大小不能超过${this.sizeLimit}M!`);
          this.fileList = [];
          return false;
        }
        resolve();
      });
    },
    async submitFile(file, fileList) {
      // 获取上传的文件
      await this.beforeUpload(file);
      this.formdata.fileList = fileList;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList, "移除前确认");
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`仅可上传${this.limit}个附件`);
    },
  },

  submitbtn() {
    console.log;
  },
};
</script>

<style scoped>
.problem h3 {
  font-size: 20px;
  font-weight: bold;
}
.problem h3 > i {
  color: #f87a23;
}
.problem h3 > span {
  font-size: 12px;
  color: #f87a23;
}
::v-deep .problem textarea {
  font-family: "微软雅黑";
  border-radius: 12px;
}

/* 附件 */
.accessory {
  margin-bottom: 80px;
}
.accessory h3 {
  font-weight: bold;
}
.accessory .uploadBtn {
  display: flex;
  align-items: center;
}
.accessory .uploadBtn .el-button {
  margin-right: 15px;
  border: 2px solid #d7d7d7;
  font-size: 14px;
  font-weight: bold;
  padding: 9px 20px;
}
.accessory .uploadBtn .el-button:hover {
  color: #fff;
  background-color: #f87a23;
  border-color: #f87a23;
}
.accessory .el-upload__tip {
  margin-top: 0;
  color: #bababa;
}
::v-deep .accessory .el-upload-list__item {
  border-bottom: 1px solid #efefef;
  padding-bottom: 10px;
}
::v-deep .accessory .el-upload-list__item:hover {
  background-color: transparent;
}
::v-deep .accessory .el-upload-list__item-name:hover {
  color: #f87a23;
}

/* 提交按钮 */
.submitBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  border-top: 1px solid #ecedf0;
  background-color: #fff;
  padding: 20px 0;
}
.submitBtn button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 70px;
}

@media (max-width: 1120px) {
  .submitBtn{
    padding: 10px 20px;
  }
  .submitBtn button{
    padding: 8px 30px;
  }
}
</style>